import React, {useEffect, useState} from 'react'
import {View, Text} from '@tarojs/components'
import {AtNoticebar, AtIcon, AtPagination} from 'taro-ui'
import Taro, {navigateTo, useRouter} from "@tarojs/taro"
import subjectStore from "../../store/subjectStore";
import {getEnv} from "../../env";
import {PageData, PaperPo} from "../../types";
import CheckIsLogin from "../../components/CheckIsLogin";
import './index.scss'


export default CheckIsLogin(() => {
  const subjectId = subjectStore.useStore(state => state.current)?.id
  const paperTypeId = useRouter().params.paperTypeId  // 类型id
  const [page, setPage] = useState(1);
  const [data, setData] = useState<PageData<PaperPo> | null>(null)
  // 设置页面标题
  useEffect(() => {
    if (paperTypeId === "2") {
      Taro.setNavigationBarTitle({
        title: "模拟试题"
      })
    }
  }, [paperTypeId])
  useEffect(() => {
    Taro.request({
      url: `${getEnv().baseUrl}/paper/list?page=${page}&pageSize=10&subjectId=${subjectId}&paperTypeId=${paperTypeId}`,
      method: "GET"
    }).then(res => {
      setData(res.data)
    })
  }, [page, paperTypeId, subjectId])


  return <View className='wing-blank'>
    {/*top*/}
    <AtNoticebar icon='money'>试卷 {data?.total} 套</AtNoticebar>
    <View className='wing-space'>
      {
        data?.records.map((item, index) => <View key={index} className='paper-box'
          onClick={() => navigateTo({url: "/pages/testPaperContent/index?paperId=" + item.id})}
        >
          <View className='paper-box-left'>
            <View> <AtIcon value='align-right' size='20' color='#6190E8' />&nbsp;&nbsp;{item.paperName}</View>
            <View className='paper-box-content'>
              <View className='paper-box-content-item'><Text
                className='paper-box-content-item-left'
              >年份：</Text><Text>{item.year}年</Text></View>
              <View className='paper-box-content-item'><Text
                className='paper-box-content-item-left'
              >类型：</Text><Text>历年真题</Text></View>

              <View className='paper-box-content-item'><Text
                className='paper-box-content-item-left'
              >总分：</Text><Text>2019年</Text></View>

              {/*<View className='paper-box-content-item'><Text*/}
              {/*  className='paper-box-content-item-left'*/}
              {/*>题数：</Text><Text>{item.questions?.length}</Text></View>*/}

              <View className='paper-box-content-item'><Text
                className='paper-box-content-item-left'
              >时间：</Text><Text>{item.time}分钟</Text></View>
            </View>
          </View>
          <View className='paper-box-right'>
            <AtIcon value='chevron-right' size='20' color='grey' />
          </View>
        </View>)
      }
    </View>
    <AtPagination total={data?.total ?? 0} current={page} pageSize={10} onPageChange={(p) => setPage(p.current)} />
  </View>
})
